<template>
	<div class="house-box" :style="getBgImg">
		<div class="house-box-body">
			<div class="title">
				<p class="title-content">{{house.title}}</p>
				<p class="price">{{countPrice}}万元</p>
			</div>
			<div class="main">
				<p>{{getZone}}{{house.village}}{{house.room}}室{{house.hall}}厅{{house.bathroom}}卫</p>
			</div>
			<div class="footer">
				<p><span style="margin-right: 5px;">{{house.room}}室</span><span
						style="margin-right: 5px;">{{house.hall}}厅</span>
					|&nbsp;{{house.area}}㎡ <span style="margin-left: 30px;">{{house.price}}/㎡</span></p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			"house": {
				type: Object
			}
		},
		data() {
			return {
				imgSrcBase: 'https://home-y.oss-cn-hangzhou.aliyuncs.com/',
			}
		},
		created() {
		},
		computed: {
			countPrice() {
				return parseInt(this.house.price * this.house.area / 10000)
			},
			getBgImg() {
				const url = this.imgSrcBase + this.house.imgFileNames[0]
				return "background: url('" + url + "') no-repeat;background-size: cover;"
			},
			getZone() {
				const zone = this.$store.getters.zones[this.house.zoneId - 1]
				return zone.label
			}
		}
	}
</script>

<style scoped>
	.house-box {
		height: 400px;
	}

	.house-box-body {
		position: relative;
		top:276px;
	}

	.house-box-body p {
		margin: 0;
	}

	.house-box-body .title .title-content {
		width: 70%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.house-box-body .title .price {
		font-size: 25px;
	}

	.house-box-body .title {
		line-height: 42px;
		height: 43px;
		background-color: black;
		color: white;
		font-size: 20px;
		padding: 0px 20px;
	}

	.house-box-body .title p {
		float: left;
	}

	.house-box-body .title .price {
		float: right;
	}

	.house-box-body .main,
	.house-box-body .footer {
		padding: 10px 0;
		clear: both;
		background-color: white;
	}

	.house-box-body .footer {
		color: #888;
	}
</style>
